<template>
    <div class="background">
        <transition name="fade" mode="in-out">
            <div v-show="show">
                <img :src="imgUrl" style="width: 100%;height: 100%;position: fixed;left: 0;top: 0">
                <el-row :gutter="10" type="flex" align="middle" justify="space-around" class="view">
                    <el-col :xs="24" :sm="10" :md="13" :lg="12" :xl="10" class="left">
                        <div class="textC">烟草局信用管理系统</div>
                        <div class="textE">Yan&nbsp;Cao&nbsp;Jv&nbsp;Xin&nbsp;Yong&nbsp;Guan&nbsp;Li&nbsp;Xi&nbsp;Tong
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="10" :md="6" :lg="7" :xl="4" class="right">
                        <el-form
                                ref="loginForm"
                                label-position="top"
                                :rules="rules"
                                :model="model"
                        >
                            <el-form-item prop="username">
                                <el-input type="text" v-model="model.username" placeholder="用户名" clearable>
                                    <template #prepend><i class="el-icon-user-solid"></i></template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="password">
                                <el-input
                                        @keyup.enter="login"
                                        type="password"
                                        v-model="model.password"
                                        placeholder="密码"
                                        show-password
                                        clearable
                                >
                                    <template #prepend><i class="el-icon-unlock"></i></template>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-checkbox v-model="model.rememberPwd"
                                        style="display: inline-block;float: left;">
                                    记住密码
                                </el-checkbox>
                            </el-form-item>

                            <el-button
                                    @click="login"
                                    type="success"
                                    :loading="loading"
                                    class="button-login"
                            >登 录
                            </el-button>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="footer">Copyright 2004-2020 QDECI,ALL Rights Reserved</div>
            </div>
        </transition>
    </div>

</template>

<script>
    import {inject, onMounted, reactive, ref, watch, toRefs} from 'vue'
    import md5 from 'js-md5';

    export default {
        name: "Login",
        setup: function (props, {attrs, slots, emit}) {
            let model = reactive({
                username: null, //用户名
                password: null, //密码
                rememberPwd: false, //记住密码
            })
            const rules = reactive(
                {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                }
            )
            let imgUrl = ref(require('../assets/1.png'))
            let loading = ref(false)
            let show = ref(false)
            const router = inject('router')
            const $message = inject('$message')
            const $axios = inject('$axios')
            const elLoading = inject('elLoading')
            const loginForm = ref(null)
            // 页面初始化时，赋值用户名密码
            onMounted(() => {
                let loadingInstance = elLoading.service({
                    fullscreen: true
                })
                // loadingInstance.start()
                let bgImg = new Image()
                bgImg.src = imgUrl.value // 获取背景图片的url
                bgImg.onerror = () => {
                    console.log('img onerror')
                    show.value = true
                }
                bgImg.onload = () => { // 等背景图片加载成功后 去除loading
                    loadingInstance.close()
                    show.value = true
                }
                console.log(222, model.username, localStorage)
                if (localStorage.getItem('name') !== "undefined" && localStorage.getItem('name') !== "null") {
                    console.log(localStorage.getItem('name'))
                    console.log(localStorage.getItem('pwd'))
                    model.username = ref(localStorage.getItem('name'))
                    model.password = ref(localStorage.getItem('pwd'))
                    model.rememberPwd = true
                }
            })
            // 记住密码
            watch(
                () => model.rememberPwd,
                val => {
                    rememberPassword(val)
                }
            )
            watch(
                () => model.username,
                val => {
                    rememberPassword(model.rememberPwd)
                }
            )
            watch(
                () => model.password,
                val => {
                    rememberPassword(model.rememberPwd)
                }
            )
            //记住密码
            const rememberPassword = val => {
                if (val === true) {
                    console.log("记住密码", model.username, typeof (model.password))
                    localStorage.setItem('name', String(model.username))
                    localStorage.setItem('pwd', String(model.password))
                } else {
                    localStorage.removeItem('name')
                    localStorage.removeItem('pwd')
                }
            }
            const loginTo = (name, pwd) => {
                $axios.post('/user/login', {
                    username: name,
                    pword: pwd,
                    verifyCode: null
                }).then(res => {
                    console.log(res.data)
                    let result = res.data
                    if (result.code === 0) {
                        router.push('/tree')
                    } else {
                        $message.error(result.message);
                    }
                    loading.value = false
                }).catch(err => {
                    $message.error('网络连接失败，稍后再试！');
                    loading.value = false
                    console.log(err)
                })
            }
            // 验证用户名密码
            const login = () => {
                loginForm.value.validate(valid => {
                    if (valid) {
                        // console.log(loading)
                        loading.value = true
                        $axios(
                            {
                                url: '/home/config',
                                method: 'get',
                                headers: {
                                    'Content-Type': 'application/json;charset=UTF-8'
                                }
                            }).then(res => {
                            console.log(res)
                            let result = res.data.data
                            if (res.data.code === 0) {
                                let password = md5(md5(String(model.password)) + result.saltCode)
                                loginTo(String(model.username), password)
                            } else {
                                $message.error(result.message);
                                loading.value = false
                            }
                        }).catch(err => {
                            $message.error('网络连接失败，稍后再试！');
                            loading.value = false
                            console.log(err)
                        })


                        // setTimeout(() => {

                        // if (model.username === 'admin' && model.password === '123456') {
                        //     //跳转首页
                        //     router.push('/tree')
                        // } else {
                        //     $message.error("用户名或者密码错误");
                        // }

                        // }, 1000)
                    }
                });

            }
            return {
                model,
                login,
                loading,
                rules,
                show,
                imgUrl,
                loginForm
            }
        },
    }
</script>

<style scoped>
    .background {
        width: 100%;
        height: 100%;
        /*background-image: linear-gradient(to bottom right,#1d1f4c,#263d89);*/
    }

    .view {
        margin: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
    }

    .view, .left {
        padding-top: 10vh;
    }

    .right {
        padding-top: 14vh;
    }

    .right i {
        font-size: 1.5em;
    }

    .textC {
        width: 100%;
        font-size: 3.5vw;
        color: aliceblue;
    }

    .textE {
        width: 100%;
        font-size: 1.5vw;
        color: aliceblue;
    }

    .button-login {
        display: block;
        width: 50%;
        border-radius: 20px;
    }

    .footer {
        height: 30px;
        width: 100%;
        background: #24243f;
        position: fixed;
        bottom: 0px;
        text-align: left;
        padding-left: 10%;
        vertical-align: middle;
        line-height: 30px;
    }

    @media (max-width: 768px) {
        .textC {
            width: 100%;
            font-size: 2rem
        }

        .textE {
            width: 100%;
            font-size: 1.5rem
        }
    }

    @media (min-width: 1200px) and (max-width: 1700px) {
        .textC {
            width: 100%;
            font-size: 3rem
        }

        .textE {
            width: 100%;
            font-size: 1.5rem
        }
    }

    @media (min-width: 1700px) {
        .textC {
            width: 100%;
            font-size: 3.5rem
        }

        .textE {
            width: 100%;
            font-size: 2rem
        }
    }
</style>